import { createMuiTheme } from "@material-ui/core/";
import shadows from "./shadows";

// const palletType = localStorage.getItem("theme");

export const lightMuiTheme = createMuiTheme({
  palette: {
    type: "light",
    primary: {
      main: "#005DFF",
    },
    grey: {
      300: "#fefefe",
      A100: "#f8f9ff",
    },
    secondary: {
      main: "#FF7474",
    },
    error: {
      main: "#f83245",
    },
    success: {
      main: "#1bc943",
    },
    info: {
      main: "#11c5db",
    },
    warning: {
      main: "#f4772e",
    },

    contrastThreshold: 3,
    tonalOffset: 0.1,
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 576,
      md: 768,
      lg: 1100,
      xl: 1381,
    },
  },

  overrides: {
    MuiTab: {
      root: {
        fontWeight: "bold",
      },
    },
    MuiListItem: {
      root: {
        backgroundColor: "#f7f7f7",
      },
    },

    MuiButton: {
      sizeSmall: {
        padding: "6px 20px",
        fontSize: 14,
      },

      outlined: {
        padding: "10px 22px",
        fontSize: 14,
        border: "1px dashed #707070",
        color: "#005DFF",
      },
      text: {
        padding: "10px 22px",
        fontSize: 14,
        textPrimary: "#ff3700",
      },

      sizeLarge: {
        padding: "16px 28px",
        fontSize: 16,
      },

      root: {
        textTransform: "none",
        fontWeight: "normal",
        padding: "10px 22px",
        fontSize: 14,
      },
    },

    MuiTooltip: {
      tooltip: {
        backgroundColor: "#070919",
        padding: "8px 16px",
        fontSize: "13px",
      },
      arrow: {
        color: "#070919",
      },
    },
  },
  typography: {
    fontFamily: ["Heebo", "sans-serif"].join(","),
    fontSize: 14,
    body2: {
      backgroundColor: "#18396f",
    },
  },
  shadows,
});

export const darkMuiTheme = createMuiTheme({
  palette: {
    type: "dark",
    background: {
      paper: "#171f2a",
      default: "",
    },

    primary: {
      main: "#70a4ff",
    },
    grey: {
      300: "#fefefe",
      A100: "#f8f9ff",
    },
    secondary: {
      main: "#FF7474",
    },
    error: {
      main: "#f83245",
    },
    success: {
      main: "#1bc943",
    },
    info: {
      main: "#11c5db",
    },
    warning: {
      main: "#f4772e",
    },

    contrastThreshold: 3,
    tonalOffset: 0.1,
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 576,
      md: 768,
      lg: 1100,
      xl: 1381,
    },
  },

  overrides: {
    MuiTab: {
      root: {
        fontWeight: "bold",
      },
    },

    MuiCard: {
      root: {
        backgroundColor: "#324054",
      },
    },
    MuiCardActionArea: {
      root: {
        backgroundColor: "#324054",
      },
    },
    MuiList: {
      root: {
        backGroudColor: "#324054",
      },
    },
    MuiListItem: {
      root: {
        backgroundColor: "#546987",
      },
    },
    MuiCardContent: {
      root: {
        backgroundColor: "#324054",
      },
    },
    MuiButton: {
      sizeSmall: {
        padding: "6px 20px",
        fontSize: 14,
      },
      outlined: {
        padding: "10px 22px",
        fontSize: 14,
        border: "1px dashed #707070",
        color: "#ffffff",
      },
      text: {
        padding: "10px 22px",
        fontSize: 14,
      },

      sizeLarge: {
        padding: "16px 28px",
        fontSize: 16,
      },

      root: {
        textTransform: "none",
        fontWeight: "normal",
        padding: "10px 22px",
        fontSize: 14,
      },
    },
    MuiTooltip: {
      tooltip: {
        backgroundColor: "#070919",
        padding: "8px 16px",
        fontSize: "13px",
      },
      arrow: {
        color: "#070919",
      },
    },
  },
  typography: {
    fontFamily: ["Heebo", "sans-serif"].join(","),
    fontSize: 14,
    body1: {
      backgroundColor: "#546987",
    },
    body2: {
      backgroundColor: "#324054",
    },
  },

  shadows,
});
